<template>
    <div class="wrap">
        <div class="title-content">
            <div class="title-text">{{this.knowName}}</div>
        </div>
        <div class="top-ele">
            <!-- <div class="downTime">{{curTime.h}}:{{curTime.m}}:{{curTime.s}}</div> -->
            <div class="downTime">{{time.h}}:{{time.m}}:{{time.s}}</div>
        </div>
        <div class="top-line"></div>
        <div class="right-ele"></div>
        <div class="left-ele"></div>
        <div class="bottom-line"></div>
        <div class="bottom-ele" :style='{height:setBtmHei}'>
            <div class="sub-item" v-for="(item,index) in subjectArr" :key="index" :style="computerPosi(item)">
                <div class="top-point"></div>
                <div class="top-sub-name">{{item.order}}</div>
                <div class="bottom-ring"></div>
            </div>
        </div>
        <div class="middle-line">
            <div class="middle-circular" v-if="this.Queue[5]">
                <div class="line1"></div>
                <div class="card1">
                    <div class="time-info">{{this.Queue[5].submitDate}}</div>
                    <div class="info-card-left"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[5].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[5].userName}}</div>
                            <div>{{handleTitle(this.Queue[5].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[5].score}}</div>
                        </div>
                    </div>
                </div>
                <div class="cubic run_top_right"></div>
            </div>
            <div class="middle-circular" v-if="this.Queue[4]">
                <div class="line2"></div>
                <div class="card2">
                    <div class="time-info">{{this.Queue[4].submitDate}}</div>
                    <div class="info-card-right"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[4].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[4].userName}}</div>
                            <div>{{handleTitle(this.Queue[4].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[4].score}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle-circular" v-if="this.Queue[3]">
                <div class="line3"></div>
                <div class="card3">
                    <div class="time-info">{{this.Queue[3].submitDate}}</div>
                    <div class="info-card-left"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[3].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[3].userName}}</div>
                            <div>{{handleTitle(this.Queue[3].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[3].score}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle-circular" v-if="this.Queue[2]">
                <div class="line4"></div>
                <div class="card4">
                    <div class="time-info">{{this.Queue[2].submitDate}}</div>
                    <div class="info-card-right"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[2].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[2].userName}}</div>
                            <div>{{handleTitle(this.Queue[2].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[2].score}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle-circular" v-if="this.Queue[1]">
                <div class="line5"></div>
                <div class="card5">
                    <div class="time-info">{{this.Queue[1].submitDate}}</div>
                    <div class="info-card-left"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[1].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[1].userName}}</div>
                            <div>{{handleTitle(this.Queue[1].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[1].score}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle-circular" v-if="this.Queue[0]">
                <div class="line6"></div>
                <div class="card6">
                    <div class="time-info">{{this.Queue[0].submitDate}}</div>
                    <div class="info-card-right"></div>
                    <div class="right-text card-info">
                        <img class="avatar-mid" :src="this.Queue[0].avatar || defImg" alt="头像">
                        <div class="persinal-info">
                            <div class="persinal-name">{{this.Queue[0].userName}}</div>
                            <div>{{handleTitle(this.Queue[0].questionId)}}</div>
                            <div style="font-size: 18px">{{this.Queue[0].score}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-content">
            <div style="position: relative">
                <div class="count-down">
                    <div class="subjectNum">NO.{{this.current>this.subjectArr.length?this.subjectArr.length:this.current}}</div>
                    <div class="secondNum">{{this.sixty}}s</div>
                </div>
                <div class="scaleAvat" v-if="subLenArr.length > 0">
                    <div class="scale-bottom" v-for="(val,index) in subLenArr" :key="index">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="top-text">{{index===subLenArr.length-1?val+'(题)':val}}</div>
                    </div>
                </div>
                <div class="scaleSenc">
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">0</div>
                    </div>
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">12</div>
                    </div>
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">24</div>
                    </div>
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">36</div>
                    </div>
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">48</div>
                    </div>
                    <div class="scale-bottom">
                        <div style="height: 4px;width: 4px;background: #ffffff"></div>
                        <div class="bottom-text">60(秒)</div>
                    </div>
                </div>
                <div style="position: absolute;top: -65px;left: 0;width: 100%">
                    <div class="people-avatar" v-for="(item,key) in singleTargetList" :key="key" :style="{left:setLeft(item.resolveed)}">
                        <Avatar style="margin-left: 5px;margin-top: 6px" size="default" :src="item.avatar || defImg" />
                    </div>
                    <div class="posi-ava" v-for="(item,index) in resolvedAvaArrFilterList" :key="index+'_'"
                         :style="{left:setLeft(item[0])}">{{item.length}}</div>
                </div>
                <div class="autobg"></div>
            </div>
            <div class="subject">
                <Carousel autoplay  v-model="value1" loop :autoplay-speed="60000" dots="none" style="padding-bottom: 15px">
                    <CarouselItem v-for="(item,key) in subjectArr" :key="key">
                        <div class="subject-title" v-text="item.order+'.'+'('+item.knowledgeQuestion.modeCode+')'+item.knowledgeQuestion.description.replace(/{{answer1}}/,'( )')">
                            
                        </div>
                        <div class="left-content-wrap" v-if="item.knowledgeQuestion.modeCode != '填空'">
                            <div class="subject-text" v-for="(val,index) in item.knowledgeAnswers" :key="val.answerID">
                                <span v-if="index == 0">A.{{val.description}}</span>
                                <span v-if="index == 1">B.{{val.description}}</span>
                                <span v-if="index == 2">C.{{val.description}}</span>
                                <span v-if="index == 3">D.{{val.description}}</span>
                            </div>
                            <div class="subject-text" v-if="item.knowledgeQuestion.modeCode == 3">
                                正确
                                
                                <div>错误</div>
                            </div>
                        </div>
                    </CarouselItem>
                </Carousel>
            </div>
        </div>
        <div class="right-content">
            <div class="peopleNum">
                <div style="color: #01c4b7;font-size: 16px;">参赛人数</div>
                <div style="margin-left: 56px;color: rgb(109, 255, 245);font-size: 22px">{{this.allPeople}}</div>
            </div>
            <div class="resolveNum">
                <div style="color: #01c4b7;font-size: 16px">正确解题次数</div>
                <div style="margin-left: 25px;color: rgb(109, 255, 245);font-size: 22px">{{this.solvePro}}</div>
            </div>
            <div class="rank-wrap">
                <div style="cursor: pointer;font-size: 16px" @click="clickRank('rank')">
                    <div :class="{textColor:textFlag}" class="defen">得分排行</div>
                    <div :class="{bgColor:textFlag}" class="line-defen"></div>
                </div>
                <div style="margin-left: 25px;cursor: pointer;font-size: 16px" @click="clickRank('ques')">
                    <div :class="{textColor:!textFlag}" class="defen">题目排行</div>
                    <div :class="{bgColor:!textFlag}" class="line-defen"></div>
                </div>
            </div>
            <div class="rank-line">
                <div class="rank-scroll">
                    <ul class="rank-ul" v-show="textFlag" v-for="(item,index) in rankList" :key="index">
                        <li class="rank-li" v-if="item.rank === 1">
                            <div class="rank-text rank-order" :class="{theFirst:firstFlag}"></div>
                            <div class="rank-text rank-name" :title='item.userName'>{{item.userName}}</div>
                            <div class="rank-text" style="width:75px;text-align:center;">{{handleResolve(item.resolve)}}</div>
                            <div class="rank-text rank-grade">{{item.score}}</div>
                        </li>
                        <li class="rank-li" v-else-if="item.rank === 2">
                            <div class="rank-text rank-order" :class="{theSecond:secondFlag}"></div>
                            <div class="rank-text rank-name" :title='item.userName'>{{item.userName}}</div>
                            <div class="rank-text" style="width:75px;text-align:center;">{{handleResolve(item.resolve)}}</div>
                            <div class="rank-text rank-grade">{{item.score}}</div>
                        </li>
                        <li class="rank-li" v-else-if="item.rank === 3">
                            <div class="rank-text rank-order" :class="{theThird:thirdFlag}"></div>
                            <div class="rank-text rank-name" :title='item.userName'>{{item.userName}}</div>
                            <div class="rank-text" style="width:75px;text-align:center;">{{handleResolve(item.resolve)}}</div>
                            <div class="rank-text rank-grade">{{item.score}}</div>
                        </li>
                        <li class="rank-li" v-else>
                            <div class="rank-text rank-order">{{item.rank}}</div>
                            <div class="rank-text rank-name" :title='item.userName'>{{item.userName}}</div>
                            <div class="rank-text" style="width:75px;text-align:center;">{{handleResolve(item.resolve)}}</div>
                            <div class="rank-text rank-grade">{{item.score}}</div>
                        </li>
                    </ul>
                    <ul class="rank-ul" v-show="!textFlag" v-for="item in quesRank" :key="item.knowledgeQuestion.questionID">
                        <li class="rank-li" v-if="item.rank === 1">
                            <div class="rank-text rank-order" :class="{theFirst:firstFlag}"></div>
                            <div class="rank-text rank-title" @mouseenter="enter($event,item)" @mouseleave="leave($event,item)" v-text="item.knowledgeQuestion.description">
                            </div>
                            <div class="rank-text rank-grade">{{item.solvedNum}}</div>
                        </li>
                        <li class="rank-li" v-else-if="item.rank === 2">
                            <div class="rank-text rank-order" :class="{theSecond:secondFlag}"></div>
                            <div class="rank-text rank-title" @mouseenter="enter($event,item)" @mouseleave="leave($event,item)" v-text="item.knowledgeQuestion.description">
                                
                            </div>
                            <div class="rank-text rank-grade">{{item.solvedNum}}</div>
                        </li>
                        <li class="rank-li" v-else-if="item.rank === 3">
                            <div class="rank-text rank-order" :class="{theThird:thirdFlag}"></div>
                            <div class="rank-text rank-title" @mouseenter="enter($event,item)" @mouseleave="leave($event,item)" v-text="item.knowledgeQuestion.description">
                            </div>
                            <div class="rank-text rank-grade">{{item.solvedNum}}</div>
                        </li>
                        <li class="rank-li" v-else>
                            <div class="rank-text rank-order">{{item.rank}}</div>
                            <div class="rank-text rank-title" @mouseenter="enter($event,item)" @mouseleave="leave($event,item)" v-text="item.knowledgeQuestion.description.replace(/{{answer1}}/,'( )')">
                            </div>
                            <div class="rank-text rank-grade">{{item.solvedNum}}</div>
                        </li>
                    </ul>
                </div>
                <div class="quesWrap" v-show="quesWrapShow">
                    <div class="quesScroll">
                        <div style="color:#fff;word-break:break-all;font-size: 16px;margin-bottom: 10px" v-text="this.quesJsonData.knowledgeQuestion?this.quesJsonData.knowledgeQuestion.description.replace(/{{answer1}}/,'( )'):''">
                            <!-- {{this.quesJsonData.knowledgeQuestion?this.quesJsonData.knowledgeQuestion.description:''}} -->
                        </div>
                        <div style="word-break:break-all;font-size: 16px" v-if="this.quesJsonData.knowledgeAnswers">
                            <div v-for="(val,index) in this.quesJsonData.knowledgeAnswers"
                                 v-if="quesJsonData.knowledgeQuestion.modeCode != 3 && quesJsonData.knowledgeQuestion.modeCode != 4"
                                 :key="val.answerID" :style="{color:val.isRight?'#f9b90b':'#56cec7'}">
                                <span v-if="index == 0">A.{{val.description}}</span>
                                <span v-if="index == 1">B.{{val.description}}</span>
                                <span v-if="index == 2">C.{{val.description}}</span>
                                <span v-if="index == 3">D.{{val.description}}</span>
                            </div>
                            <!-- 判断题 -->
                            <div v-for="(val,index) in this.quesJsonData.knowledgeAnswers"
                                 v-if="quesJsonData.knowledgeQuestion.modeCode == 3"
                                 :key="val.answerID" :style="{color:val.isRight?'#56cec7':'#f9b90b'}">
                                <span v-if="index == 0">A.{{val.description}}</span>
                                <span v-if="index == 1">B.{{val.description}}</span>
                                <span v-if="index == 2">C.{{val.description}}</span>
                                <span v-if="index == 3">D.{{val.description}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="svg-wrap">
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[5]">
                <path :d="handle(this.Queue[5].questionId,5)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[4]">
                <path :d="handle(this.Queue[4].questionId,4)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[3]">
                <path :d="handle(this.Queue[3].questionId,3)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[2]">
                <path :d="handle(this.Queue[2].questionId,2)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[1]">
                <path :d="handle(this.Queue[1].questionId,1)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
            <svg style="position: absolute;top: 0;left: 0" width="100%" height="100%" v-if="this.Queue[0]">
                <path :d="handle(this.Queue[0].questionId,0)" stroke='rgb(249, 185, 11)' stroke-width='1px' fill='transparent'></path>
            </svg>
        </div>
        <div v-show="showEndImg" style="position: absolute;top: 200px;right: 300px;z-index: 20">
            <img :src="statusImg" alt="END">
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import { mapState, mapMutations } from 'vuex'
    import encryption from '@/libs/encryption.js'
    import { getServerTime } from '@/api/dict'
    import {queryAllKnowLedgeQuestion,getEvePel} from '@/api/knowledgeCompet.js'
    import timer from '@/mixin/timer'
    export default {
        mixins: [timer],
        data(){
            return{
                value1:0,
                USER_ID:'',
                canBg:require('../../../assets/knowledge/BGX1.jpg'),
                fullHeight:document.documentElement.clientHeight,
                fullWidth:document.documentElement.clientWidth,
                // 默认头像
                defImg:require('@/assets/globalIcon/defult.jpg'),
                // 状态图
                statusImg:require('../../../assets/knowledge/endKnow.png'),
                // 知识赛信息
                knowName:'',
                contestId:'',
                // 人数和解题总数
                allPeople:0,
                solvePro:0,
                // 排行
                textFlag:true,
                rankList:[],
                quesRank:[],
                // 前三名
                firstFlag:true,
                secondFlag:true,
                thirdFlag:true,
                // 大倒计时
                timer:0,
                curTime:{
                    h:'00',
                    m:'00',
                    s:'00'
                },
                // 底部点的位置
                pointArr:[
                    {
                        tx:40,
                        ty:139,
                        bx:111,
                        by:30,
                    },
                    {
                        tx:66,
                        ty:185,
                        bx:162,
                        by:39,
                    },
                    {
                        tx:76,
                        ty:206,
                        bx:194,
                        by:27,
                    },
                    {
                        tx:99,
                        ty:244,
                        by:64,
                        bx:216,
                    },
                    {
                        tx:142,
                        ty:230,
                        bx:258,
                        by:50,
                    },
                    {
                        tx:190,
                        ty:214,
                        bx:307,
                        by:37,
                    },
                    {
                        tx:238,
                        ty:206,
                        bx:328,
                        by:63,
                    },
                    {
                        tx:249,
                        ty:298,
                        bx:342,
                        by:93,
                    },
                    {
                        tx:286,
                        ty:186,
                        bx:352,
                        by:47,
                    },
                    {
                        tx:353,
                        ty:268,
                        bx:389,
                        by:168,
                    },
                    {
                        tx:327,
                        ty:189,
                        bx:393,
                        by:37,
                    },
                    {
                        tx:326,
                        ty:248,
                        bx:393,
                        by:97,
                    },
                    {
                        tx:316,
                        ty:337,
                        bx:397,
                        by:140,
                    },
                    {
                        tx:383,
                        ty:187,
                        bx:433,
                        by:63,
                    },
                    {
                        tx:391,
                        ty:224,
                        bx:440,
                        by:81,
                    },
                    {
                        tx:386,
                        ty:349,
                        bx:445,
                        by:142,
                    },
                    {
                        tx:418,
                        ty:284,
                        bx:471,
                        by:75,
                    },
                    {
                        tx:441,
                        ty:327,
                        bx:486,
                        by:120,
                    },
                    {
                        tx:477,
                        ty:214,
                        bx:520,
                        by:38,
                    },
                    {
                        tx:484,
                        ty:260,
                        bx:536,
                        by:57,
                    },
                    {
                        tx:505,
                        ty:322,
                        bx:555,
                        by:117,
                    },
                    {
                        tx:567,
                        ty:290,
                        bx:586,
                        by:172,
                    },
                    {
                        tx:524,
                        ty:367,
                        bx:579,
                        by:133,
                    },
                    {
                        tx:576,
                        ty:334,
                        bx:592,
                        by:220,
                    },
                    {
                        tx:608,
                        ty:179,
                        bx:624,
                        by:62,
                    },
                    {
                        tx:610,
                        ty:294,
                        bx:629,
                        by:175,
                    },
                    {
                        tx:627,
                        ty:341,
                        bx:646,
                        by:225,
                    },
                    {
                        tx:636,
                        ty:180,
                        bx:654,
                        by:66,
                    },
                    {
                        tx:641,
                        ty:217,
                        bx:657,
                        by:100,
                    },
                    {
                        tx:655,
                        ty:314,
                        bx:673,
                        by:198,
                    },
                    {
                        tx:653,
                        ty:254,
                        bx:674,
                        by:136,
                    },
                    {
                        tx:679,
                        ty:184,
                        bx:698,
                        by:69,
                    },
                    {
                        tx:677,
                        ty:294,
                        bx:699,
                        by:133,
                    },
                    {
                        tx:682,
                        ty:366,
                        bx:700,
                        by:203,
                    },
                    {
                        tx:712,
                        ty:201,
                        bx:729,
                        by:85,
                    },
                    {
                        tx:734,
                        ty:343,
                        bx:751,
                        by:227,
                    },
                    {
                        tx:768,
                        ty:238,
                        bx:783,
                        by:122,
                    },
                    {
                        tx:774,
                        ty:332,
                        bx:787,
                        by:215,
                    },
                    {
                        tx:796,
                        ty:211,
                        bx:812,
                        by:95,
                    },
                    {
                        tx:799,
                        ty:375,
                        bx:815,
                        by:259,
                    },
                    {
                        tx:812,
                        ty:247,
                        bx:825,
                        by:132,
                    },
                    {
                        tx:824,
                        ty:308,
                        bx:837,
                        by:194,
                    },
                    {
                        tx:842,
                        ty:358,
                        bx:860,
                        by:215,
                    },
                    {
                        tx:878,
                        ty:409,
                        bx:878,
                        by:264,
                    },
                    {
                        tx:867,
                        ty:236,
                        bx:881,
                        by:71,
                    },
                    {
                        tx:893,
                        ty:263,
                        bx:893,
                        by:156,
                    },
                    {
                        tx:900,
                        ty:347,
                        bx:895,
                        by:180,
                    },
                    {
                        tx:918,
                        ty:242,
                        bx:915,
                        by:80,
                    },
                    {
                        tx:917,
                        ty:381,
                        bx:917,
                        by:280,
                    },
                    {
                        tx:943,
                        ty:333,
                        bx:937,
                        by:170,
                    },
                    {
                        tx:958,
                        ty:245,
                        bx:951,
                        by:81,
                    },
                    {
                        tx:963,
                        ty:412,
                        bx:963,
                        by:260,
                    },
                    {
                        tx:969,
                        ty:216,
                        bx:969,
                        by:106,
                    },
                    {
                        tx:990,
                        ty:342,
                        bx:983,
                        by:178,
                    },
                    {
                        tx:989,
                        ty:343,
                        bx:984,
                        by:178,
                    },
                    {
                        tx:1007,
                        ty:253,
                        bx:1007,
                        by:144,
                    },
                    {
                        tx:1013,
                        ty:387,
                        bx:1013,
                        by:277,
                    },
                    {
                        tx:1062,
                        ty:353,
                        bx:1053,
                        by:221,
                    },
                    {
                        tx:1062,
                        ty:243,
                        bx:1056,
                        by:78,
                    },
                    {
                        tx:1083,
                        ty:375,
                        bx:1071,
                        by:258,
                    },
                    {
                        tx:1086,
                        ty:298,
                        bx:1077,
                        by:166,
                    },
                    {
                        tx:1107,
                        ty:424,
                        bx:1089,
                        by:273,
                    },
                    {
                        tx:1119,
                        ty:339,
                        bx:1108,
                        by:223,
                    },
                    {
                        tx:1126,
                        ty:245,
                        bx:1117,
                        by:81,
                    },
                    {
                        tx:1133,
                        ty:384,
                        bx:1124,
                        by:252,
                    },
                    {
                        tx:1150,
                        ty:218,
                        bx:1141,
                        by:87,
                    },
                    {
                        tx:1159,
                        ty:362,
                        bx:1148,
                        by:250,
                    },
                    {
                        tx:1188,
                        ty:347,
                        bx:1184,
                        by:183,
                    },
                    {
                        tx:1206,
                        ty:355,
                        bx:1197,
                        by:223,
                    },
                    {
                        tx:1218,
                        ty:297,
                        bx:1209,
                        by:137,
                    },
                    {
                        tx:1231,
                        ty:248,
                        bx:1225,
                        by:128,
                    },
                    {
                        tx:1248,
                        ty:335,
                        bx:1242,
                        by:214,
                    },
                    {
                        tx:1265,
                        ty:285,
                        bx:1257,
                        by:153,
                    },
                    {
                        tx:1284,
                        ty:302,
                        bx:1275,
                        by:183,
                    },
                    {
                        tx:1291,
                        ty:220,
                        bx:1283,
                        by:88,
                    },
                    {
                        tx:1315,
                        ty:318,
                        bx:1304,
                        by:206,
                    },
                    {
                        tx:1378,
                        ty:312,
                        bx:1337,
                        by:117,
                    },
                    {
                        tx:1351,
                        ty:365,
                        bx:1337,
                        by:224,
                    },
                    {
                        tx:1412,
                        ty:248,
                        bx:1374,
                        by:62,
                    },
                    {
                        tx:1409,
                        ty:290,
                        bx:1375,
                        by:121,
                    },
                    {
                        tx:1428,
                        ty:176,
                        bx:1401,
                        by:59,
                    },
                    {
                        tx:1449,
                        ty:336,
                        bx:1404,
                        by:139,
                    },
                    {
                        tx:1477,
                        ty:222,
                        bx:1440,
                        by:89,
                    },
                    {
                        tx:1481,
                        ty:325,
                        bx:1443,
                        by:198,
                    },
                    {
                        tx:1504,
                        ty:348,
                        bx:1455,
                        by:175,
                    },
                    {
                        tx:1502,
                        ty:269,
                        bx:1461,
                        by:87,
                    },
                    {
                        tx:1510,
                        ty:171,
                        bx:1468,
                        by:55,
                    },
                    {
                        tx:1550,
                        ty:236,
                        bx:1500,
                        by:97,
                    },
                    {
                        tx:1557,
                        ty:336,
                        bx:1501,
                        by:159,
                    },
                    {
                        tx:1598,
                        ty:185,
                        bx:1533,
                        by:58,
                    },
                    {
                        tx:1597,
                        ty:351,
                        bx:1539,
                        by:169,
                    },
                    {
                        tx:1591,
                        ty:248,
                        bx:1541,
                        by:110,
                    },
                    {
                        tx:1648,
                        ty:192,
                        bx:1587,
                        by:51,
                    },
                    {
                        tx:1644,
                        ty:236,
                        bx:1588,
                        by:100,
                    },
                    {
                        tx:1699,
                        ty:230,
                        bx:1612,
                        by:41,
                    },
                    {
                        tx:1753,
                        ty:305,
                        bx:1633,
                        by:57,
                    },
                    {
                        tx:1766,
                        ty:221,
                        bx:1690,
                        by:87,
                    },
                    {
                        tx:1807,
                        ty:206,
                        bx:1711,
                        by:35,
                    },
                    {
                        tx:1815,
                        ty:155,
                        bx:1752,
                        by:51,
                    },
                    {
                        tx:1841,
                        ty:137,
                        bx:1774,
                        by:29,
                    },
                ],
                // 模拟题目数组
                subjectArr:[],
                pointNum:[],
                // 60秒倒计时
                sixty:60,
                // 当前是第几题
                current:1,
                // 任务队列
                Queue:[],
                submitTime:'init',
                // 题目个数分段
                subLenArr:[],
                // 学员回答的试题个数
                singleTargetList:[],
                // 存一下题目
                testQuesList:[],
                // 鼠标移入移出试题
                quesJsonData:{},
                quesWrapShow:false,
                // 已结束显示图片
                showEndImg:false,
                // 解题头像数组
                resolvedAvaArr:[],
                // 底部背景的高度
                setBtmHei:'483px',
                // 保存一个人员id和头像的字典
                userIdAddAvatar:{},
            }
        },
        created(){
            // 获取用户id
            let November = sessionStorage.getItem('November')
            November = JSON.parse(encryption.SelfUseDecrypt(November))
            this.USER_ID = November.userId
            // 获取知识赛信息
            this.knowName = this.$route.query.name
            this.contestId = this.$route.query.id
            this.current = parseInt(sessionStorage.getItem('currentSub') || 1)
            this.sjsz(49)
            this.queryStatus()
            this.getServerTime()
        },
        computed:{
            resolvedAvaArrFilterList() {
                return this.resolvedAvaArr.filter(item => item.length >= 3)
            }
        },
        mounted(){
            window.onresize = () => {
                // 从本地取当前回答正确的人员列表,重新绘制线
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                this.Queue = sessionStorage.getItem('currBingo')? JSON.parse(sessionStorage.getItem('currBingo')) :[]
                for(let i=0;i<this.Queue.length;i++){
                    if(i<=5){
                        this.handle(this.Queue[i].questionId,i+1)
                    }
                }
                this.setBtmHei = (this.fullHeight/1080)*483+'px'
            }
            this.setBtmHei = (this.fullHeight/1080)*483+'px'
            // 获取题目
            this.getSubject()
            // 刷新页面从本地获取读秒
            if(sessionStorage.getItem('sixty')){
                this.sixty = parseInt(sessionStorage.getItem('sixty'))
                let width = 498*(this.sixty/60)
                $('.autobg').css({
                    'width':width+'px',
                })
                this.sixtyTime()
            }
            // 从本地取当前回答正确的人员列表
            this.Queue = sessionStorage.getItem('currBingo')? JSON.parse(sessionStorage.getItem('currBingo')) :[]
        },
        destroyed(){
            clearTimeout(this.serverTimeout)
        },
        methods:{
            ...mapMutations(['setCurrentTime']),
            getServerTime() {
                let server = new Date().getTime()
                let runTime = performance.now()
                getServerTime().then(({ data = {} }) => {
                    if (data.code === 1) {
                        server = data.attribute.currentTime
                        this.setCurrentTime(server)
                    }
                })
                clearInterval(this.serverInterval)
                this.serverInterval = setInterval(() => {
                    let runTime2 = performance.now()
                    this.setCurrentTime(server + (runTime2 - runTime))
                }, 200)
                clearTimeout(this.serverTimeout)
                this.serverTimeout = setTimeout(() => {
                    this.getServerTime()
                }, 30 * 1000)
            },
            // 覆盖timer.js中的getDrillDetail方法，用于在更新服务器时间时同步更新夺旗赛状态
                getDrillDetail() {
                    // this.getStatus();
                },
            // 随机整数
            sjsz(num){
                this.pointNum = [];
                let arr = []
                for (let i=0; i <=num; i++) {
                    arr.push(i);
                }
                arr.sort(
                    function () {
                        return 0.5 - Math.random();
                    }
                )
                for(var i=arr.length-1;i>=0;i--){
                    arr.splice(i,0,99-arr[i])
                }
                this.pointNum = arr
            },
            // 轮询比赛状态
            queryStatus(){
                this.queryStatusSetinterval = setInterval(()=>{
                    this.getStatus()
                },3000)
            },
            // 获取状态
            getStatus(){
                let time = new Date().getTime()
                let params = {
                    submitTime:this.submitTime,
                }
                getEvePel(this.contestId,params)
                    .then(res=>{
                        if(res.code == 1){
                            let item = res.data.items
                            this.submitTime = item.submitTime
                            if(item.contestStatus === 1 || item.contestStatus === '1'){ // 进行中
                                this.$Message.info({
                                    content:'比赛进行中',
                                    duration:3,
                                })
                                clearInterval(this.queryStatusSetinterval)
                                this.statusImg = require('../../../assets/knowledge/endKnow.png')
                                this.showEndImg = false
                                this.getServeTime(new Date(item.endTime).getTime());  // 总体倒计时
                                this.sixtyTime()  // 单个试题倒计时
                                this.getData()
                            }else if(item.contestStatus === 2 || item.contestStatus === '2'){ // 已结束
                                clearInterval(this.queryStatusSetinterval)
                                this.getEndData()
                            }else if(item.contestStatus === 0 || item.contestStatus === '0'){  // 未开始
                                this.statusImg = require('../../../assets/knowledge/nobegin.png')
                                this.showEndImg = true
                            }
                        }
                    })
                    .catch(err=>{
                    })
            },
            // 如果比赛结束 获取数据
            getEndData(){
                let params = {
                    submitTime:this.submitTime,
                }
                getEvePel(this.contestId,params)
                    .then(res=>{
                        if(res.code == 1){
                            let item = res.data.items
                            this.allPeople = item.membersNum
                            this.solvePro = item.succNum
                            this.quesRank = item.targetList
                            let rankListData = item.singleRankList
                            let avartList = item.singleTargetList
                            for(let i=0;i<rankListData.length;i++){
                                let userId = rankListData[i].userId
                                let resolved = avartList.filter((item)=>{
                                    return userId===item.userId
                                })
                                rankListData[i].resolve = resolved[0].resolveed
                            }
                            this.rankList = rankListData
                            if(!this.showEndImg){
                                this.showEndImg = true
                            }
                        }
                    })
                    .catch(err=>{
                    })
            },
            // 试题倒计时
            sixtyTime(){
                clearTimeout(this.sixtyNum)
                this.sixtyNum = setTimeout(()=>{
                    let width = parseFloat($('.autobg').css('width').split('px'))
                    if(this.current > this.subjectArr.length){
                        this.sixty = 0
                        $('.autobg').css({
                            'width':'0px'
                        })
                        sessionStorage.removeItem('sixty')
                        clearTimeout(this.sixtyNum)
                    }else {
                        width -= width/this.sixty
                        this.sixty -= 1
                        $('.autobg').css({
                            'width':width+'px'
                        })
                        if(this.sixty <= 0){
                            this.sixty = 60
                            // 题目加一
                            this.current += 1
                            $('.autobg').css({
                                'width':'498px'
                            })
                        }
                        sessionStorage.setItem('sixty',this.sixty)
                        sessionStorage.setItem('currentSub',this.current)
                        this.sixtyTime()
                    }
                },1000)
            },
            // 轮询数据
            getData(){
                clearInterval(this.getDataInterval)
                this.getDataInterval = setInterval(()=>{
                    this.getPeopleNum()
                },3000)
            },
            // 获取参赛人数和解题总数
            getPeopleNum(){
                let time = new Date().getTime()
                let params = {
                    submitTime:this.submitTime,
                }
                this.resolvedAvaArr = []
                getEvePel(this.contestId,params)
                    .then(res=>{
                        if(res.code == 1){
                            let item = res.data.items
                            this.allPeople = item.membersNum
                            this.solvePro = item.succNum
                            this.quesRank = item.targetList
                            let rankListData = item.singleRankList
                            let avartList = item.singleTargetList
                            this.singleTargetList = item.singleTargetList
                            let saveRankObj = {}
                            this.userIdAddAvatar = {}
                            for(let m=0;m<avartList.length;m++){
                                let avarId = avartList[m].userId
                                saveRankObj[avarId] = avartList[m]
                                this.userIdAddAvatar[avarId] = avartList[m].avatar
                            }
                            for(let i=0;i<rankListData.length;i++){
                                let userid = rankListData[i].userId
                                rankListData[i].resolve = saveRankObj[userid].resolveed
                            }
                            this.rankList = rankListData
                            // 处理重叠的人员
                            let obj1 = {}
                            let arr1 = []
                            for(let m=0;m<avartList.length;m++){
                                let resol = avartList[m].resolveed
                                if(resol >= item.targetList){
                                    resol = item.targetList
                                }
                                if(!obj1[resol]){
                                    obj1[resol] = []
                                }
                                obj1[resol].push(resol)
                            }
                            for(let n in obj1){
                                arr1.push(obj1[n])
                            }
                            arr1 = arr1.sort((a,b)=>{
                                return b.length - a.length
                            })
                            this.resolvedAvaArr = arr1
                            // 处理 学员换头像，刷新页面头像不显示bug
                            if(this.Queue.length > 0){
                                this.Queue.forEach((item)=>{
                                    if(this.userIdAddAvatar[item.userId]){
                                        item.avatar = this.userIdAddAvatar[item.userId]
                                    } 
                                })
                            }
                            // 本次答对试题的学员
                            let bingoArr = []
                            // item.attackList = [{userName:11}]
                            if(this.submitTime != item.submitTime){
                                if(item.attackList.length>6){
                                     bingoArr = item.attackList.reverse().slice(0,5)
                                }else{
                                    bingoArr = item.attackList
                                }
                            }
                            this.bingo(bingoArr)
                            this.submitTime = item.submitTime
                            // 比赛结束
                            if(item.contestStatus === 2 || item.contestStatus === '2'){
                                // 关闭倒计时
                                clearTimeout(this.setTimeInter)
                                clearTimeout(this.sixtyNum)
                                clearInterval(this.getDataInterval)
                                clearTimeout(this.timeout)
                                this.sixty = 0
                                sessionStorage.removeItem('sixty')
                                if(!this.showEndImg){
                                    this.showEndImg = true
                                }
                                this.time = {
                                    h:'00',
                                    m:'00',
                                    s:'00'
                                }
                            }
                        }
                    })
                    .catch(err=>{
                    })
            },
            // 模拟人员翻转
            bingo(arr){
                if(arr && arr.length > 0){
                    this.Queue = sessionStorage.getItem('currBingo')? JSON.parse(sessionStorage.getItem('currBingo')) :[]
                    this.Queue = this.Queue.concat(arr)
                    this.Queue.forEach((item)=>{
                       if(this.userIdAddAvatar[item.userId]){
                        item.avatar = this.userIdAddAvatar[item.userId]
                       } 
                    })
                    sessionStorage.setItem('currBingo',JSON.stringify(this.Queue))
                }
                if(this.Queue.length > 6){
                    this.Queue.splice(0,1)
                    if($('.card-info').hasClass('flip-animation-start')){
                        $('.card-info').removeClass('flip-animation-start').addClass('flip-animation-end');
                    }else{
                        $('.card-info').removeClass('flip-animation-end').addClass('flip-animation-start');
                    }
                }
            },
            // 设置头像的位置
            setLeft(num){
                if(num > this.subjectArr.length){
                    num = this.subjectArr.length
                }
                return (num/this.subjectArr.length)*100 + '%'
            },
           // 获取题目
            getSubject(){
                let time = new Date().getTime()
                let params = {
                    submitTime:time,
                }
                getEvePel(this.contestId,params)
                    .then(res=>{
                        if(res.code == 1){
                            let item = res.data.items
                            // 获取试题
                            if(item.targetList){
                                this.testQuesList = item.targetList
                                // 试题数组
                                this.joinPoint(this.testQuesList)
                                this.handleOrder(this.testQuesList.length,5)
                            }
                        }
                    })
                    .catch(err=>{
                    })
            },
            // 将坐标点加入到题目中
            joinPoint(list){
                list.forEach((item,index)=>{
                    let getIndex = this.pointNum[index]
                    item.tx = this.pointArr[getIndex].tx
                    item.ty = this.pointArr[getIndex].ty
                    item.bx = this.pointArr[getIndex].bx
                    item.by = this.pointArr[getIndex].by/1.2
                    item.order = `题目${index+1}`
                    switch (item.knowledgeQuestion.modeCode) {
                        case 1:
                        item.knowledgeQuestion.modeCode = '单选'
                            break;
                        case 2:
                        item.knowledgeQuestion.modeCode = '多选'
                            break;
                        case 3:
                        item.knowledgeQuestion.modeCode = '判断'
                            break;
                        case 4:
                        item.knowledgeQuestion.modeCode = '填空'
                            break;
                    
                    }
                })
                this.subjectArr = list
                if(this.current <= this.subjectArr.length){
//                    this.autoFlag = true
                }
            },
            // 返回题目编号
            handleTitle(id){
                let item = this.subjectArr.filter((val)=>{
                    return val.questionId === id
                })
                if(item.length>0){
                    return item[0].order
                }
            },
            handleOrder(len,key){
                this.subLenArr = []
                for(let i=0;i<len;i++){
                    if(i+key <= len){
                        this.subLenArr.push(i+1)
                    }
                    i = i+key
                }
                if(this.subLenArr.length > 4){
                    this.subLenArr = []
                    this.handleOrder(len,key+1)
                }else {
                    let lastVal = this.subLenArr[this.subLenArr.length - 1]
                    if(lastVal < len){
                        this.subLenArr.push(len)
                    }
                }
            },
            // 计算题目的位置
            computerPosi(item){
                let x = this.fullWidth/1920
                let y = this.fullHeight/1080
                let tx = item.tx*x
                let ty = item.ty*y
                let bx = item.bx*x
                let by = item.by*y
                let chaWidth = Math.abs(tx-bx);
                let chaHeight = Math.abs(ty-by);
                let line = Math.pow(chaWidth,2)+Math.pow(chaHeight,2)/2;
                let lineLength = Math.sqrt(line); // 线长
                let angle = 0
                let cos = chaHeight/lineLength
                let radina = Math.acos(cos)
                angle=Math.floor(180/(Math.PI/radina))
                if(tx > this.fullWidth/2){
                    angle = -angle
                }
                return {
                    'height':lineLength + 'px',
                    "left": bx+'px',
                    "bottom": by+'px',
                    "-webkit-transform-origin": "bottom",
                    "-webkit-transform": "rotate(" + (-angle) + "deg)"
                }
            },
            // 排行
            clickRank(val){
                if(val === 'rank'){
                    this.textFlag = true
                }else if(val === 'ques'){
                    this.textFlag = false
                }
            },
            // 绘制svg曲线
            handle(id,key){
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                let x = this.fullWidth/1920
                let y = this.fullHeight/1080
                let item = this.subjectArr.filter((val)=>{
                    return val.questionId === id
                })
                let x1 = this.fullWidth/2 + 6
                let index = 0
                if(this.Queue.length > 6){
                    index = 6 - key
                }else {
                    index = this.Queue.length - key
                }
                let y1 = 220+92+55*index - 55
                if(item.length > 0){
                    let tx = parseInt(item[0].tx)*x
                    let ty = parseInt(item[0].ty)*y
                    let bx = parseInt(item[0].bx)*x
                    let by = parseInt(item[0].by)*y
                    let x2 = (tx+bx)/2
                    let y2 = this.fullHeight - (ty+by)/2
                    return this.createCPath(x1,y1,x2,y2)
                }
            },
            //  计算path
            createCPath(x1, y1, x2, y2) {
                var path = "M" + x1 + " " + y1 + " ";
                //  var cx1 = (5*x1+x2*3)/8;
                var cx1 = x1;
                var cy1 = y1;
                var cx2 = (4*x1+x2)/5;
                var cy2 = y2
                var c = "C" + cx1 + " " + cy1 + "," + cx2 + " " + cy2 + ",";
                path = path + c + x2 + " " + y2;
                return path;
            },
            // 鼠标移入移出试题
            enter(e,item){
                if(item.knowledgeQuestion.modeCode == 4){//填空题需要处理下数据
                    item.knowledgeAnswers[0].description = item.knowledgeAnswers[0].explanation
                    this.quesJsonData = item
                }else if(item.knowledgeQuestion.modeCode == 3){//判断题
                    if(item.knowledgeAnswers[0].isRight ==1){
                        item.knowledgeAnswers[0].description = '正确'
                    }else{
                        item.knowledgeAnswers[0].description = '错误'
                    }
                    this.quesJsonData = item
                }else{
                    this.quesJsonData = item
                }
                this.quesWrapShow = true
            },
            leave(e,item){
                this.quesWrapShow = false
            },
            // 已解答试题数
            handleResolve(num){
                if(num<this.subjectArr.length){
                    return `当前第${num}题`
                }else if(num >= this.subjectArr.length){
                    return `已完成`
                }
            },
        },
    }
</script>
<style scoped>
    /* 引入倒计时字体 */
    @font-face {
        /*这里是说明调用来的字体名字*/
        font-family: lcd;
        /*这里是字体文件路径*/
        src: url('../../../assets/font/lcd.ttf')
    }
    /* 内容 */
    .wrap{
        position: relative;
        width: 100%;
        height: 100vh;
        background: url("../../../assets/knowledge/BGX1.jpg") no-repeat center center;
        background-size: 100% 100%;
    }
    .title-content{
        position: absolute;
        top: 20px;
        left: 15px;
        width: 500px;
        height: 76px;
        background: url("../../../assets/knowledge/titleX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 9;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    .title-text{
        height: 100%;
        width: 400px;
        color: rgb(249, 185, 11);
        font-size: 32px;
        line-height: 76px;
    }
    .top-ele{
        position: absolute;
        top: 0;
        left: 50%;
        width: 484px;
        height: 272px;
        margin-left: -242px;
        background: url("../../../assets/knowledge/UFOX3.png") no-repeat center center;
        background-size: 100% 100%;
        transform: translate(7px,10px);
        z-index: 3;
    }
    .downTime{
        text-align: center;
        font-size: 70px;
        color: rgb(107, 255, 249);
        margin-top: 28px;
        font-family: lcd;
    }
    .top-line{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 58px;
        background: url("../../../assets/knowledge/toplineX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 2;
    }
    .right-ele{
        position: absolute;
        top: 50%;
        right: 15px;
        width: 28px;
        height: 700px;
        margin-top: -350px;
        background: url("../../../assets/knowledge/rightX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 2;
    }
    .left-ele{
        position: absolute;
        top: 50%;
        left: 15px;
        width: 28px;
        height: 700px;
        margin-top: -350px;
        background: url("../../../assets/knowledge/leftX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 2;
    }
    .bottom-ele{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 483px;
        background: url("../../../assets/knowledge/bottom.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 1;
        overflow: hidden;
    }
    .bottom-line{
        position: absolute;
        bottom: 10px;
        left: 20px;
        width: 1893px;
        height: 49px;
        background: url("../../../assets/knowledge/bottomlineX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 2;
    }
    .canvas-wrap{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    /* 中间的线 */
    .middle-line{
        position: absolute;
        top: 214px;
        left: 50%;
        z-index: 9;
        height: 422px;
        width: 5px;
        margin-left: 3px;
        border-radius: 3px;
        background-color: rgb(78, 255, 215);
        box-shadow: 0 0 5px rgb(78, 255, 215);
        padding-top: 95px;
    }
    .middle-circular{
        position: relative;
        background-color: rgb(78, 255, 215);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-bottom: 45px;
        margin-left: -2px;
    }
    .line1{
        position: absolute;
        top: 4px;
        left: -50px;
        width: 50px;
        height: 1px;
        background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
    }
    .card1{
        position: absolute;
        top: -45px;
        left: -280px;
    }
    .time-info{
        padding-left: 10px;
        color: rgb(1, 196, 183);
    }
    .info-card-left{
        width: 231px;
        height: 82px;
        background: url("../../../assets/knowledge/infoCardX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 11;
        padding: 8px 5px 8px 12px;
    }
    .line2{
        position: absolute;
        top: 4px;
        left: 10px;
        width: 50px;
        height: 1px;
        background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
    }
    .card2{
        position: absolute;
        top: -85px;
        left: 59px;
    }
    .info-card-right{
        width: 231px;
        height: 82px;
        background: url("../../../assets/knowledge/infoCardX1.png") no-repeat center center;
        background-size: 100% 100%;
        z-index: 11;
        transform: rotate(180deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    }
    .right-text{
        width: 231px;
        height: 82px;
        position: absolute;
        top: 21px;
        left: 0;
        padding: 8px 5px 8px 12px;
        z-index: 12;
    }
    .card-info{
        display: flex;
        justify-content: flex-start;
    }
    .flip-animation-start {
        animation: flipBook1 1s forwards;
        -moz-animation: flipBook1 1s forwards; /* Firefox */
        -webkit-animation: flipBook1 1s forwards; /* Safari and Chrome */
        -o-animation: flipBook1 1s forwards; /* Opera */
    }
    .flip-animation-end {
        animation: flipBook2 1s forwards;
        -moz-animation: flipBook2 1s forwards; /* Firefox */
        -webkit-animation: flipBook2 1s forwards; /* Safari and Chrome */
        -o-animation: flipBook2 1s forwards; /* Opera */
    }
    @keyframes flipBook1 {
        0% {
            -webkit-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
        100% {
            -webkit-transform: rotateX(-360deg);
            -ms-transform: rotateX(-360deg);
            -o-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
        }
    }
    /*关闭书页*/
    @keyframes flipBook2 {
        0% {
            -webkit-transform: rotateX(-360deg);
            -ms-transform: rotateX(-360deg);
            -o-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
        }
        100% {
            -webkit-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
    }
    .avatar-mid{
        border: 1px solid rgb(221, 171, 16);
        height: 65px;
        width: 65px;
    }
    .persinal-info{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        color: rgb(221, 171, 16);
        margin-left: 15px;
        width: 130px;
    }
    .persinal-name{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .line3{
        position: absolute;
        top: 4px;
        left: -80px;
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
    }
    .card3{
        position: absolute;
        top: -40px;
        left: -310px;
    }
    .line4{
        position: absolute;
        top: 4px;
        left: 10px;
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
    }
    .card4{
        position: absolute;
        top: -85px;
        left: 89px;
    }
    .line5{
        position: absolute;
        top: 4px;
        left: -110px;
        width: 110px;
        height: 1px;
        background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
    }
    .card5{
        position: absolute;
        top: -40px;
        left: -340px;
    }
    .line6{
        position: absolute;
        top: 4px;
        left: 10px;
        width: 110px;
        height: 1px;
        background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
    }
    .card6{
        position: absolute;
        top: -85px;
        left: 119px;
    }
    /* 左侧内容 */
    .left-content{
        position: absolute;
        top: 200px;
        left: 70px;
        width: 500px;
        z-index: 12;
    }
    .count-down{
        width: 100%;
        height: 60px;
        border: 2px solid rgb(45, 115, 115);
        display: flex;
        justify-content: space-between;
        line-height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
        background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .subjectNum{
        font-size: 16px;
        font-weight: bold;
        color: #01c4b7;
        margin-left: 20px;
    }
    .secondNum{
        font-size: 16px;
        color: rgb(249, 185, 11);
        margin-right: 20px;
    }
    .autobg{
        width: 498px;
        height: 56px;
        background: linear-gradient(90deg,rgb(3, 23, 33), rgb(90, 84, 29));
        position: absolute;
        top: 2px;
        left: 2px;
        z-index: 5;
        opacity: 0.7;
        border-right: 2px solid rgb(249, 185, 11);
        transition: width 1.1111111s;
    }
    /* //animation : go 60s linear infinite; */
    @keyframes go {
        from {
            width: 498px;
        }
        to {
            width: 0;
        }
    }
    .scaleAvat{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 7;
        display: flex;
        justify-content: space-between;
    }
    .top-text{
        position: absolute;
        top: -30px;
        left: -3px;
        font-size: 14px;
        color: #56cec7;
    }
    .scaleSenc{
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
    .scale-bottom{
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .bottom-text{
        position: absolute;
        top: 10px;
        left: -3px;
        font-size: 14px;
        color: rgb(170, 136, 22);
    }
    .subject{
        margin-top: 110px;
        position: relative;
        width: 500px;
        border-right: 1px dashed rgb(45, 115, 115);
        border-left: 1px dashed rgb(45, 115, 115);
        border-bottom: 1px dashed rgb(45, 115, 115);
        background: rgba(0,25,36,.5);
    }
    .subject-title{
        width: 500px;
        max-height: 100px;
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 1px solid rgb(45, 115, 115);
        border-bottom: 1px solid rgb(45, 115, 115);
        font-weight: bold;
        font-size: 16px;
        color: #01c4b7;
        padding: 10px 10px 10px 20px;
        background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .subject-text{
        width: 500px;
        color: #56cec7;
        font-size: 16px;
        line-height: 2;
        padding: 0 20px;
        word-break:break-all;
    }
    .left-content-wrap{
        width: 100%;
        height: 225px;
        overflow-y: auto;
        overflow-x:hidden;
    }
    /* 右侧内容 */
    .right-content{
        width: 288px;
        position: absolute;
        top:90px;
        right: 70px;
        z-index: 11;
    }
    .peopleNum{
        width: 100%;
        height: 50px;
        border: 2px solid rgb(45, 115, 115);
        padding: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .resolveNum{
        width: 100%;
        height: 50px;
        border: 2px solid rgb(45, 115, 115);
        padding: 15px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .rank-wrap{
        width: 100%;
        height: 50px;
        border: 2px solid rgb(45, 115, 115);
        padding: 15px;
        display: flex;
        justify-content: flex-start;
        background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .defen{
        color: rgb(63, 155, 152);
        margin-bottom: 5px
    }
    .line-defen{
        height: 2px;
        width: 25px;
        background-color: rgb(2, 34, 49);
        margin: 0 auto;
    }
    .textColor{
        color: #01c4b7;
    }
    .bgColor{
        background-color: #56cec7;
    }
    .rank-line{
        width: 100%;
        height: 410px;
        border-right: 1px dashed rgb(45, 115, 115);
        border-left: 1px dashed rgb(45, 115, 115);
        border-bottom: 1px solid rgb(45, 115, 115);
        background: rgba(0,25,36,.5);
        position: relative;
    }
    .rank-scroll{
        height: 100%;
        width: 283px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .rank-ul{
        padding:0 5px 0 15px;
    }
    .rank-li{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        height: 25px;
        align-items: center;
    }
    .rank-order{
        width: 22px;
        text-align: center;
    }
    .rank-grade{
        width: 50px;
    }
    .rank-name{
        text-align: left;
        width: 75px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rank-title{
        text-align: left;
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rank-text{
        color: #56cec7;
        font-size: 14px;
    }
    .theFirst{
        width: 22px;
        height: 25px;
        background: url("../../../assets/knowledge/theFirst.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .theSecond{
        width: 22px;
        height: 25px;
        background: url("../../../assets/knowledge/theSecond.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .theThird{
        width: 22px;
        height: 25px;
        background: url("../../../assets/knowledge/theThird.png") no-repeat center center;
        background-size: 100% 100%;
    }
    /*width: 400px; */
    .quesWrap{
        position: absolute;
    
        min-height: 460px;
        max-height: 560px;
        top: -50px;
        left: -415px;
        z-index: 11;
        background-color: rgba(0,25,36,0.8);
        border-bottom: 2px solid rgb(45, 115, 115);
        border-top: 2px solid rgb(45, 115, 115);
        border-right: 1px dashed rgb(45, 115, 115);
        border-left: 1px dashed rgb(45, 115, 115);
        padding: 20px;
    }
    .quesScroll{
        width: 360px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    /* 绘制顶部分线 */
    .sub-item{
        position: absolute;
        bottom:0;
        left: 0;
        width: 1px;
        background: rgba(78, 255, 215,0.5);
        box-shadow: 0 0 2px rgb(78, 255, 215);
    }
    .top-point{
        position: absolute;
        top: -23.5px;
        left: -24.5px;
        width: 47px;
        height: 47px;
        background: url("../../../assets/knowledge/cyan-star.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .bottom-ring{
        position: absolute;
        bottom: -30px;
        left: -30px;
        width: 60px;
        height: 60px;
        transform:rotateX(60deg);
        background: radial-gradient(rgba(78, 255, 215, .6) 0%, rgba(78, 255, 215, 0.4) 30%,rgba(78, 255, 215, .2) 40%,rgba(0, 0, 0, 0) 80%);
    }
    .top-sub-name{
        position: absolute;
        top: -10px;
        left: 15px;
        width: 60px;
        color: rgb(78, 255, 215);
        font-size: 18px;
    }
    /* 绘制曲线 */
    .svg-wrap{
        height: 100%;
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
    }
    /* 人员头像 */
    .people-avatar{
        position: absolute;
        top: -15px;
        left: 0;
        margin-left: -16px;
        width: 42px;
        height: 51px;
        background: url("../../../assets/knowledge/point.png") no-repeat center center;
        background-size: 100% 100%;
    }
    /* left: 0; */
    .posi-ava{ 
        position: absolute;
        top: -30px;
        
        padding: 0 5px;
        background-color: rgb(7, 29, 40);
        border-bottom-right-radius: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border: 1px solid #2d7373;
        color: #2d7373;
        font-size: 16px;
    }
</style>
<style>
    .right-content .ivu-tooltip-inner{
        white-space: normal;
    }
</style>

